<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>home</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/demo.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo1.css" />
    <link rel="stylesheet" type="text/css" href="css/component.css" />
    <link rel="stylesheet" href="css/an-skill-bar.css">

</head>

<body>
    <nav>
        <div class="nav-inner">
            <div class="container">
                <div class="nav-top">
                    <span class="logo">
                        <img src="images/tub1.png" alt="">
                    </span>
                    <ul class="nav-u1">
                        <li><a class="active" href="#">首页</a></li>
                        <li><a href="#about">关于</a></li>
                        <li><a href="#experience">经历</a></li>
                        <li><a href="#works">作品</a></li>
                        <li><a href="#blog">博客</a></li>
                        <li><a href="#contant">联系我</a></li>
                    </ul>
                </div>
                <div class="nav-text">
                    <h3>我的名字叫</h3>
                    <h2>徐瑞雪</h2>
                    <h4>我是一名web前端的学员</h4>
                    <p>人类需要善于实践的人，这种人能由他们的工作取得最大利益；但是人类也需要梦想者，这种人醉心于一种事业的大公无私的发展，因而不能注意自身的物质利益。 —— 居里夫人</p>
                    <p class="nav-btn">
                        <a>阅读更多</a>
                        <a>联系我</a>
                    </p>
                </div>
            </div>
        </div>
    </nav>
    <main>
        <div class="container">
            <div class="main-1" id="about">
                <div class="title">
                    <h1>About Me</h1>
                    <div class="black"></div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <div class="main-txt1">
                            <p><b>姓名：</b>徐瑞雪</p>
                            <p><b>年龄：</b>19岁</p>
                            <p><b>家乡：</b>河北省沧州市吴桥县</p>
                            <p><b>爱好：</b>看书，看电影，听歌，打羽毛球</p>
                            <p><b>个人名言：</b>做人，不要太把自己当回事，更不要不把别人当回事</p>
                        </div>
                        <a class="down" href="#">Download CV</a>
                    </div>
                    <div class="col-md-4">
                        <img class="about" src="images/about.jpg" alt="">
                    </div>
                    <div class="col-md-4">
                        <div id="skill">
                            <div class="skillbar html">
                                <div class="filled" data-width="90%"></div>
                                <span class="title">HTML</span>
                                <span class="percent">90%</span>
                            </div>
                            <div class="skillbar css">
                                <span class="title"></i> CSS</span>
                                <span class="percent">90%</span>
                                <div class="filled" data-width="90%"></div>
                            </div>
                            <div class="skillbar bootstrap">
                                <span class="title">bootstrap</span>
                                <span class="percent">85%</span>
                                <div class="filled" data-width="85%"></div>
                            </div>
                            <div class="skillbar js">
                                <span class="title">JS</span>
                                <span class="percent">70%</span>
                                <div class="filled" data-width="70%"></div>
                            </div>
                            <div class="skillbar flex">
                                <span class="title"></i> flex</span>
                                <span class="percent">60%</span>
                                <div class="filled" data-width="60%"></div>
                            </div>
                            <div class="skillbar ajax">
                                <span class="title"></i> ajax</span>
                                <span class="percent">50%</span>
                                <div class="filled" data-width="50%"></div>
                            </div>
                            <div class="skillbar Vue">
                                <span class="title"></i> Vue</span>
                                <span class="percent">40%</span>
                                <div class="filled" data-width="40%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="jingli" id="experience">
            <div class="jingli-inner">
                <div class="container">
                    <div class="title">
                        <h1>Experience</h1>
                        <div class="white"></div>
                    </div>
                    <div class="row">
                        <div class="col-md-4 first">
                            <h4>吴桥县高速服务区小吃部</h4>
                            <h5>2018.01--2018.02</h5>
                            <div class="jingli-txt">
                                <b>主要负责:</b>
                                <p>1、制作各种食品；</p>
                                <p>2、宣传及售卖各种食品；</p>
                                <p>3、负责食品的备料及后勤；</p>
                                <p>4、负责原材料的提货。</p>
                            </div>
                        </div>
                        <div class="col-md-4 second">
                            <h4>天津市西青区普洛斯物流公司</h4>
                            <h5>2018.07--2018.09、2019.01--2019-02</h5>
                            <div class="jingli-txt">
                                <b>主要负责:</b>
                                <p>1、负责仓库拣货、调货；</p>
                                <p>2、负责各类服装、鞋子的分类、还架、封装等。</p>
                            </div>
                        </div>
                        <div class="col-md-4 third">
                            <h4>青岛市万象城食通天</h4>
                            <h5>2019.07--2019.08</h5>
                            <div class="jingli-txt">
                                <b>主要负责:</b>
                                <p>1、负责点单收银；</p>
                                <p>2、食品的备料及制作；</p>
                                <p>3、食品的宣传及售卖；</p>
                                <p>4、前档口卫生的维护与打扫。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="pic-lunbo" id="works">
            <div class="container">
                <div class="title">
                    <h1>Works</h1>
                    <div class="black"></div>
                </div>
                <div class="grid">
                    <figure class="effect-lily">
                        <img src="images/1.jpg" alt="img01" />
                        <figcaption>
                            <h2><a href="http://xrx000813.gitee.io/hongxiutianxiang/index.html"></a>红袖添香</h2>
                            <p>一个涵盖小说、散文、歌词、剧本、日记等体裁为一体的网站。</p>
                        </figcaption>
                    </figure>
                    <figure class="effect-sadie">
                        <img src="images/2.jpg" alt="img02" />
                        <figcaption>
                            <h2><a href="http://xrx000813.gitee.io/duitang/"></a>堆糖</h2>
                            <p>一个收集发现喜爱的事物，以图片的方式来展示和浏览的网站。</p>
                        </figcaption>
                    </figure>
                    <figure class="effect-chico">
                        <img src="images/3.jpg" alt="img15" />
                        <figcaption>
                            <h2><a href="http://xrx000813.gitee.io/tengxunxinwen/"></a>腾讯新闻</h2>
                            <p>一个集新闻信息,区域垂直生活服务、社会化媒体资讯和产品为一体的互联网媒体平台。</p>
                        </figcaption>
                    </figure>
                    <figure class="effect-layla">
                        <img src="images/4.jpg" alt="img04" />
                        <figcaption>
                            <h2><a href="http://xrx000813.gitee.io/yun_ba/"></a>云巴网</h2>
                            <p>一家专业的实时消息通信云服务提供商。</p>
                        </figcaption>
                    </figure>
                    <figure class="effect-dexter">
                        <img src="images/12.jpg" alt="img12" />
                        <figcaption>
                            <h2><a href="http://xrx000813.gitee.io/hengwang/"></a>恒望科技</h2>
                            <p>一个可以适应手机端的网站。</p>
                        </figcaption>
                    </figure>
                    <figure class="effect-oscar">
                        <img src="images/6.jpg" alt="img08" />
                        <figcaption>
                            <h2><a href="http://xrx000813.gitee.io/genius/"></a>Genius</h2>
                            <p>一个可以适应手机端的网站。</p>
                        </figcaption>
                    </figure>
                </div>
            </div>
        </div>
        <div class="blog" id="blog">
            <div class="container">
                <div class="title">
                    <h1>Blog</h1>
                    <div class="white"></div>
                </div>
                <p class="blog-txt1">下面的是我的个人博客当中的一些内容。</p>
                <p>这里的每篇博客都是我在平时的学习中总结的知识点。</p>
                <div class="row">
                    <div class="col-md-4 first">
                        <div class="col-title">
                            <div class="col-h4">
                                <h4> 关于 swiper4</h4>
                            </div>
                            <div class="col-h5">
                                <h5>10th June</h5>
                            </div>
                        </div>
                        <div class="blog-txt2">
                            <p>用swiper4给博客首页配置的一个3D方块切换轮播图，感兴趣的可以看看，注意事项和使用经验我写在了代码下面。</p>
                            <p>之前首页的轮播图用的是：自动播放响应式轮播图代码……
                            </p>
                        </div>
                        <p><a class="more" href="#">Read More</a></p>
                    </div>
                    <div class="col-md-4 second">
                        <div class="col-title">
                            <div class="col-h4">
                                <h4>返回顶部效果</h4>
                            </div>
                            <div class="col-h5">
                                <h5>15th June</h5>
                            </div>
                        </div>
                        <div class="blog-txt2">
                            <p>今天这篇文章应该是javascript回到顶部滑动效果及点击导航滑动到相应热点的效果，一共有四种方法来介绍，由推荐的简单办法，到js方案。下面让我们一一来为大家讲解和介绍。
                            </p>
                        </div>
                        <p><a class="more" href="#">Read More</a></p>
                    </div>
                    <div class="col-md-4 third">
                        <div class="col-title">
                            <div class="col-h4">
                                <h4>关于 CSS</h4>
                            </div>
                            <div class="col-h5">
                                <h5>2th July</h5>
                            </div>
                        </div>
                        <div class="blog-txt2">
                            <p>今天这篇文章讲的是css固定宽高和位置内部元素布局的效果，说不上什么小技巧吧，之前用过，发现这个布局对于单行元素来说，没有什么问题，因为我的需求就是单行元素，不换行来说的……
                            </p>
                        </div>
                        <p><a class="more" href="#">Read More</a></p>
                    </div>
                </div>
            </div>
        </div>
        <div class="contant" id="contant">
            <div class="container">
                <div class="title">
                    <h1>Contant</h1>
                    <div class="black"></div>
                </div>
                <div class="row">
                    <div class="col-md-6 first">
                        <h4>地址信息</h4>
                        <p>
                            <img src="images/con-1.jpg" alt="">
                            <span>河北省沧州市吴桥县沟店铺乡东徐庄村</span>
                        </p>
                        <p>
                            <img src="images/con-2.jpg" alt="">
                            <span>132-3076-0907</span>
                        </p>
                        <p>
                            <img src="images/con-3.jpg" alt="">
                            <span>1473722064@qq.com</span>
                        </p>
                        <textarea name="" id="" cols="60" rows="10"></textarea>
                    </div>
                    <div class="col-md-6 second">
                        <h4>联系我</h4>
                        <p>
                            <span class="tit">
                                <img src="images/con-4.jpg" alt="">
                                <span>Name</span>
                            </span>
                            <input type="text" placeholder="Name">
                        </p>
                        <p>
                            <span class="tit">
                                <img src="images/con-3.jpg" alt="">
                                <span>Email</span>
                            </span>
                            <input type="text" placeholder="Email">
                        </p>
                        <p>
                            <span class="tit">
                                <img src="images/con-2.jpg" alt="">
                                <span>Phone</span>
                            </span>
                            <input type="text" placeholder="Phone">
                        </p>
                        <p>
                            <span class="tit">
                                <img src="images/con-5.jpg" alt="">
                                <span>Message</span>
                            </span>
                            <textarea id="mess" cols="100" rows="10" placeholder="Message..."></textarea>
                        </p>
                        <form action="">
                            <input id="submit" type="submit" value="Submit">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <ul>
            <li><img src="images/foot-1.jpg" alt=""></li>
            <li><img src="images/foot-2.jpg" alt=""></li>
            <li><img src="images/foot-3.jpg" alt=""></li>
            <li><img src="images/foot-4.jpg" alt=""></li>
            <li><img src="images/foot-5.jpg" alt=""></li>
        </ul>
        <p>Copyright © 2019 by XuRuixue.All rights Reserved.</p>
        <div id="toTop">△</div>
    </footer>


    <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="js/an-skill-bar.js"></script>
    <script src="js/main.js"></script>
</body>

</html>